<!--
  智慧社区管理系统 - 权限控制测试页面
  @author Wu.Liang
  @date 2024-01-01
  @updated 2025-07-03 - 权限控制粒度简化，仅保留菜单级权限
-->
<template>
  <div class="permission-test">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>权限控制测试</span>
          <el-button type="primary" @click="refreshPermissions">刷新权限</el-button>
        </div>
      </template>

      <!-- 用户信息展示 -->
      <el-descriptions title="当前用户信息" :column="3" border>
        <el-descriptions-item label="用户名">{{ userStore.userInfo?.username }}</el-descriptions-item>
        <el-descriptions-item label="角色">{{ userStore.userRoles.join(', ') }}</el-descriptions-item>
        <el-descriptions-item label="菜单权限数量">{{ permissionStore.allMenuPermissions.length }}</el-descriptions-item>
      </el-descriptions>

      <!-- 菜单权限测试 -->
      <el-divider content-position="left">菜单权限测试</el-divider>
      
      <el-row :gutter="16">
        <el-col :span="8">
          <el-card>
            <template #header>菜单权限检查</template>
            <div class="test-section">
              <el-button v-if="hasMenuPermission('user:menu')" type="primary">用户管理</el-button>
              <el-button v-if="hasMenuPermission('region:menu')" type="success">区域管理</el-button>
              <el-button v-if="hasMenuPermission('property:menu')" type="warning">物业管理</el-button>
              <el-button v-if="hasMenuPermission('nonexistent:menu')" type="danger">不存在菜单</el-button>
            </div>
          </el-card>
        </el-col>

        <el-col :span="8">
          <el-card>
            <template #header>角色检查</template>
            <div class="test-section">
              <el-button v-if="checkRole(ROLE_CODES.SUPER_ADMIN)" type="primary">超级管理员</el-button>
              <el-button v-if="checkRole(ROLE_CODES.ADMIN)" type="success">管理员</el-button>
              <el-button v-if="checkRole(ROLE_CODES.USER)" type="warning">普通用户</el-button>
              <el-button v-if="checkRole('nonexistent')" type="danger">不存在角色</el-button>
            </div>
          </el-card>
        </el-col>

        <el-col :span="8">
          <el-card>
            <template #header>任意菜单权限检查</template>
            <div class="test-section">
              <el-button 
                v-if="hasAnyMenuPermission(['user:menu', 'region:menu'])" 
                type="primary"
              >
                用户或区域管理
              </el-button>
              <el-button 
                v-if="hasAllMenuPermissions(['user:menu', 'region:menu'])" 
                type="success"
              >
                用户和区域管理
              </el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 权限组件测试 -->
      <el-divider content-position="left">权限组件测试</el-divider>
      
      <el-row :gutter="16">
        <el-col :span="12">
          <el-card>
            <template #header>PermissionButton 组件</template>
            <div class="test-section">
              <PermissionButton permission="user:menu" type="primary" @click="handleButtonClick">
                用户管理
              </PermissionButton>
              <PermissionButton permission="region:menu" type="success" @click="handleButtonClick">
                区域管理
              </PermissionButton>
              <PermissionButton permission="property:menu" type="warning" @click="handleButtonClick">
                物业管理
              </PermissionButton>
              <PermissionButton permission="nonexistent:menu" type="danger" @click="handleButtonClick">
                不存在菜单
              </PermissionButton>
            </div>
          </el-card>
        </el-col>

        <el-col :span="12">
          <el-card>
            <template #header>PermissionContainer 组件</template>
            <div class="test-section">
              <PermissionContainer permission="user:menu" show-fallback>
                <div class="content-box">
                  <h4>用户管理权限内容</h4>
                  <p>只有拥有 user:menu 权限的用户才能看到此内容</p>
                </div>
                <template #fallback>
                  <div class="fallback-content">
                    <el-alert title="权限不足" type="warning" show-icon />
                  </div>
                </template>
              </PermissionContainer>

              <PermissionContainer permission="admin:menu" show-fallback>
                <div class="content-box">
                  <h4>管理员权限内容</h4>
                  <p>只有管理员才能看到此内容</p>
                </div>
              </PermissionContainer>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 数据权限测试 -->
      <el-divider content-position="left">数据权限测试</el-divider>
      
      <el-card>
        <template #header>DataScopeFilter 组件</template>
        <DataScopeFilter 
          data-field="communityId"
          :show-custom-select="true"
          :custom-options="communityOptions"
          @scope-change="handleScopeChange"
        />
        
        <el-table :data="filteredData" border style="width: 100%">
          <el-table-column prop="id" label="ID" width="80" />
          <el-table-column prop="name" label="名称" />
          <el-table-column prop="communityId" label="社区ID" />
          <el-table-column prop="status" label="状态" />
        </el-table>
      </el-card>

      <!-- 权限工具函数测试 -->
      <el-divider content-position="left">权限工具函数测试</el-divider>
      
      <el-card>
        <template #header>权限检查结果</template>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="user:menu 权限">
            {{ checkPermission('user:menu') }}
          </el-descriptions-item>
          <el-descriptions-item label="region:menu 权限">
            {{ checkPermission('region:menu') }}
          </el-descriptions-item>
          <el-descriptions-item label="超级管理员角色">
            {{ checkRoleResult(ROLE_CODES.SUPER_ADMIN) }}
          </el-descriptions-item>
          <el-descriptions-item label="任意菜单权限检查">
            {{ checkAnyMenuPermissionResult(['user:menu', 'region:menu']) }}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/store/user'
import { usePermissionStore } from '@/store/permission'
import { isSuperAdmin, hasRole, hasPermission } from '@/utils/permission'
import PermissionButton from '@/components/permission/PermissionButton.vue'
import PermissionContainer from '@/components/permission/PermissionContainer.vue'
import DataScopeFilter from '@/components/permission/DataScopeFilter.vue'
import { ROLE_CODES } from '@/constants/roles'
import { showSuccess } from '@/utils/message'

// Store
const userStore = useUserStore()
const permissionStore = usePermissionStore()

// 响应式数据
const testData = ref([
  { id: 1, name: '测试数据1', communityId: '001', status: '正常' },
  { id: 2, name: '测试数据2', communityId: '002', status: '正常' },
  { id: 3, name: '测试数据3', communityId: '003', status: '禁用' },
  { id: 4, name: '测试数据4', communityId: '001', status: '正常' }
])

const filteredData = ref([...testData.value])

const communityOptions = ref([
  { value: '001', label: '社区A' },
  { value: '002', label: '社区B' },
  { value: '003', label: '社区C' }
])

// 方法
const refreshPermissions = () => {
  permissionStore.refreshPermissionCache()
  showSuccess('权限已刷新')
}

const handleButtonClick = () => {
  showSuccess('按钮点击成功')
}

const handleScopeChange = (scopes: string[]) => {
  console.log('数据范围变化:', scopes)
  if (scopes.length === 0) {
    filteredData.value = [...testData.value]
  } else {
    filteredData.value = testData.value.filter(item => 
      scopes.includes(item.communityId)
    )
  }
}

const checkMenuPermissionResult = (permission: string) => {
  const result = hasMenuPermission(permission)
  return result ? '有权限' : '无权限'
}

const checkRoleResult = (role: string) => {
  const result = checkRole(role)
  return result.hasPermission ? '有角色' : '无角色'
}

const checkAnyMenuPermissionResult = (permissions: string[]) => {
  const result = hasAnyMenuPermission(permissions)
  return result ? '有任意权限' : '无权限'
}

  // 检查角色
  const checkRole = (role: string) => {
    return hasRole(role)
  }
  
  // 检查菜单权限
  const hasMenuPermission = (permission: string) => {
    return hasPermission(permission)
  }
  
  // 检查任意菜单权限
  const hasAnyMenuPermission = (permissions: string[]) => {
    return permissions.some(permission => hasPermission(permission))
  }
  
  // 检查所有菜单权限
  const hasAllMenuPermissions = (permissions: string[]) => {
    return permissions.every(permission => hasPermission(permission))
  }

// 检查超级管理员角色
const isSuperAdminComputed = computed(() => {
  return isSuperAdmin()
})

// 检查权限
const checkPermission = (permission: string) => {
  return hasPermission(permission)
}

// 生命周期
onMounted(() => {
  console.log('权限测试页面已加载')
})
</script>

<style scoped>
.permission-test {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.test-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.content-box {
  padding: 16px;
  background-color: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 4px;
  margin-bottom: 8px;
}

.content-box h4 {
  margin: 0 0 8px 0;
  color: #0369a1;
}

.content-box p {
  margin: 0;
  color: #0c4a6e;
}

.fallback-content {
  padding: 16px;
}

.el-divider {
  margin: 24px 0;
}

.el-card {
  margin-bottom: 16px;
}
</style> 